{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <!-- IE最高引擎 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="{% static 'index/lib/css/bootstrap.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'index/lib/css/font-awesome.min.css' %}">

    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="{% static 'index/css/style.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'index/css/custom.css' %}">
    
</head>
<body class="flat-blue">
<div class="app-container">
    <div class="container-fluid">
        <div class="side-body padding-top">
            <div class="row">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <div class="title" >{{ index_list.blog_title }}</div>
                        </div>
                    </div>
                    <div class="card-body">
                        <article class="post i-{{ i.pk }}">
                        <h1 class="entry-title">
                            <a href="">{{ index_list.blog_title }}</a>
                        </h1>
                        </article>
                        
                        <article class="post post-{{ i.pk }}">
                            <header class="entry-header">
                                <div class="entry-meta">
                                    <span >
                                        <a href="#">{{ index_list.blog_category.name }}</a></span>
                                    <span class="post-date"><a href="#"><time class="entry-date"
                                                                              datetime="{{ index_list.created_date }}">{{ index_list.create_date | date:"Y年m月d日 H:i" }}</time></a></span>
                                    <span class="post-author"><a href="#">{{ index_list.blog_author.username }}</a></span>
                                    <span class="comments-link">
                                        <a href="{{ post.get_absolute_url }}#comment-area">{{ i.comment_set.count }} 评论</a></span>
                                    <span class="views-count"><a href="#">{{ i.views }} 阅读</a></span>
                                </div>
                            </header>

                            {% block toc %}
                                <div class="widget widget-content">
                                    <h3 class="widget-title">文章目录</h3>
                                    {{ post.toc|safe }}
                                </div>
                            {% endblock toc %}

                            <div class="entry-content clearfix">
                                {{ index_list.blog_body | safe }}
                                <div class="widget-tag-cloud">
                                    <ul>
                                        标签：
                                        {% for tag in post.tags.all %}
                                            <li><a href="{% url 'blog:tag' tag.pk %}"># {{ tag.name }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </article>
                        <section class="comment-area" id="comment-area">
                            <hr>
                            <h3>发表评论</h3>
                            <form action="{% url 'comments:post_comment' index_list.pk %}" method="post" class="comment-form">
                                {% csrf_token %}
                                <div class="row">
                                    <div class="col-md-4">
                                      <label for="{{ form.name.id_for_label }}">名字：</label>
                                      {{ form.name }}
                                      {{ form.name.errors }}
                                    </div>
                                    <div class="col-md-4">
                                      <label for="{{ form.email.id_for_label }}">邮箱：</label>
                                      {{ form.email }}
                                      {{ form.email.errors }}
                                    </div>
                                    <div class="col-md-4">
                                      <label for="{{ form.url.id_for_label }}">URL：</label>
                                      {{ form.url }}
                                      {{ form.url.errors }}
                                    </div>
                                    <div class="col-md-12">
                                      <label for="{{ form.text.id_for_label }}">评论：</label>
                                      {{ form.text }}
                                      {{ form.text.errors }}
                                      <button type="submit" class="comment-btn">发表</button>
                                    </div>
                                  </div>    <!-- row -->
                            </form>
                            <div class="comment-list-panel">
                                <h3>评论列表，共 <span>{{ post.comments.count }}</span> 条评论</h3>
                                <ul class="comment-list list-unstyled">
                                        {% for comment in comment_list %}
                                        <li class="comment-item">
                                            <span class="nickname">{{ comment.name }}</span>
                                            <time class="submit-date"
                                                  datetime="{{ comment.create_date }}">{{ comment.create_date }}</time>
                                            <div class="text">
                                                {{ comment.text }}
                                            </div>
                                        </li>
                                        {% empty %}
                                        暂无评论
                                        {% endfor %}
                                </ul>
                            </div>
                        </section>
                    </div>
            </div>
        </div>
    </div>
</div>
<footer class="app-footer">
    <div class="wrapper">
        <span class="pull-right">2.1 <a href="#"><i class="fa fa-long-arrow-up"></i></a></span> © Powered By Jarbo  2016-2017 - 备案号：<a href="http://www.miitbeian.gov.cn/" title="备案号" target="_blank">黔ICP备17001735号</a>
    </div>
</footer>
</body>
</html>